<div class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
		<div class="max-w-3xl mx-auto text-center">
			<h2 class="text-3xl font-extrabold sm:text-4xl">All the features you want</h2>
			<p class="mt-4 text-lg" [ngClass]="['text' + plainInv]">
				Pellentesque viverra, leo id euismod laoreet, nunc risus molestie orci, vel faucibus
				quam justo id mauris.
			</p>
		</div>
		<dl
			class="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-4 lg:gap-x-8"
		>
			<div class="flex">
				<svg
					class="flex-shrink-0 w-6 h-6"
					[ngClass]="['text' + primary]"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M5 13l4 4L19 7"
					></path>
				</svg>
				<div class="ml-3">
					<dt class="text-lg font-medium">Quisque at urna</dt>
					<dd class="mt-2" [ngClass]="['text' + plainInv]">
						Vivamus ultricies bibendum tortor, molestie imperdiet justo cursus eu. Donec
						quis arcu magna. Integer tempor egestas dolor.
					</dd>
				</div>
			</div>
			<div class="flex">
				<svg
					class="flex-shrink-0 w-6 h-6"
					[ngClass]="['text' + primary]"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M5 13l4 4L19 7"
					></path>
				</svg>
				<div class="ml-3">
					<dt class="text-lg font-medium">Quisque eu dui lacinia</dt>
					<dd class="mt-2" [ngClass]="['text' + plainInv]">
						Quisque ultricies volutpat sapien nec varius. Sed sit amet justo vestibulum,
						efficitur risus quis, gravida libero.
					</dd>
				</div>
			</div>
			<div class="flex">
				<svg
					class="flex-shrink-0 w-6 h-6"
					[ngClass]="['text' + primary]"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M5 13l4 4L19 7"
					></path>
				</svg>
				<div class="ml-3">
					<dt class="text-lg font-medium">Mauris dignissim</dt>
					<dd class="mt-2" [ngClass]="['text' + plainInv]">
						Phasellus nec molestie arcu. Proin dictum, lorem mollis rutrum efficitur,
						lectus velit pharetra elit, et dictum purus nibh auctor velit.
					</dd>
				</div>
			</div>
			<div class="flex">
				<svg
					class="flex-shrink-0 w-6 h-6"
					[ngClass]="['text' + primary]"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M5 13l4 4L19 7"
					></path>
				</svg>
				<div class="ml-3">
					<dt class="text-lg font-medium">Proin nulla eros</dt>
					<dd class="mt-2" [ngClass]="['text' + plainInv]">
						Sed ornare ultricies gravida. Morbi egestas dolor turpis, ornare laoreet est
						vehicula non.
					</dd>
				</div>
			</div>
			<div class="flex">
				<svg
					class="flex-shrink-0 w-6 h-6"
					[ngClass]="['text' + primary]"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M5 13l4 4L19 7"
					></path>
				</svg>
				<div class="ml-3">
					<dt class="text-lg font-medium">Proin dictum</dt>
					<dd class="mt-2" [ngClass]="['text' + plainInv]">
						Lorem mollis rutrum efficitur, lectus velit pharetra elit, et dictum purus
						nibh auctor velit.
					</dd>
				</div>
			</div>
			<div class="flex">
				<svg
					class="flex-shrink-0 w-6 h-6"
					[ngClass]="['text' + primary]"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M5 13l4 4L19 7"
					></path>
				</svg>
				<div class="ml-3">
					<dt class="text-lg font-medium">Quisque eu dui lacinia</dt>
					<dd class="mt-2" [ngClass]="['text' + plainInv]">
						Cras a mauris tincidunt, scelerisque justo sit amet, hendrerit est. Fusce
						venenatis diam fringilla metus convallis, at dapibus enim congue.
					</dd>
				</div>
			</div>
			<div class="flex">
				<svg
					class="flex-shrink-0 w-6 h-6"
					[ngClass]="['text' + primary]"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M5 13l4 4L19 7"
					></path>
				</svg>
				<div class="ml-3">
					<dt class="text-lg font-medium">Cras vel bibendum tellus</dt>
					<dd class="mt-2" [ngClass]="['text' + plainInv]">
						Curabitur molestie neque ac massa pulvinar, nec sollicitudin nunc consequat.
						Donec mattis orci eros, vitae porttitor risus pretium eget.
					</dd>
				</div>
			</div>
			<div class="flex">
				<svg
					class="flex-shrink-0 w-6 h-6"
					[ngClass]="['text' + primary]"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M5 13l4 4L19 7"
					></path>
				</svg>
				<div class="ml-3">
					<dt class="text-lg font-medium">Dignissim magna</dt>
					<dd class="mt-2" [ngClass]="['text' + plainInv]">
						Cras ac lectus erat. Curabitur condimentum luctus nisi, non lacinia ipsum.
					</dd>
				</div>
			</div>
		</dl>
	</div>
</div>
